<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="header">
        <header-title :title-list="['Android', 'IOS']" @updateData="getTableData"/>
        <el-button type="primary" @click="addAPPClick">新增版本</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column label="版本号" prop="version"></el-table-column>
        <el-table-column label="应用名称" prop="android_application_type">
          <template slot-scope="scope">
            {{ scope.row.android_application_type === 1 ? '回声' : '回声' }}
          </template>
        </el-table-column>
        <el-table-column label="更新文案" prop="update_content"></el-table-column>
        <el-table-column label="更新方式" prop="update_type">
          <template slot-scope="scope">
            {{ scope.row.update_type === 1 ? '强制更新' : '自主更新' }}
          </template>
        </el-table-column>
        <el-table-column label="上线时间" prop="add_time"></el-table-column>
        
        <el-table-column label="二维码" prop="img_url">
          <template slot-scope="scope">
            <img :src="scope.row.img_url" alt="">
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="action">
          <template slot-scope="scope">
            <el-button plain size="mini" type="primary" @click="editModalClick(scope.row)">编辑</el-button>
            <el-button plain size="mini" type="danger" @click="delClick(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end">
        <el-pagination
          :current-page="pageList.page"
          :page-size="pageList.perPage"
          :page-sizes="[10, 20, 30, 40]"
          :total="pageList.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <modal-config :detail="modalData.detail" :dialog-visible.sync="modalData.visibility"
                    :status.sync="modalData.status" @updateTable="getTableData"
      />
    </el-card>
  </div>
</template>

<script>
import headerTitle from './listVersionComps/headerTitle/headerTitle'
import modalConfig from './listVersionComps/modalConfig/modalConfig'
import { appConfigListData, delAppManagement } from '@/api/config/listVersion'

export default {
  components: {
    headerTitle, modalConfig
  },
  data() {
    return {
      // 弹窗的关闭与开启 false 关闭, true 开启
      modalData: {
        visibility: false,
        // 1 为 新增版本, 2 为 编辑版本
        status: 1,
        detail: {}
      },
      // 表格数据
      tableData: [],
      // 分页相关
      pageList: {
        page: 1,
        total: 10,
        perPage: 10
      },
      // 表格 loading
      loading: false
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    /**
     * getTableData
     * @desc 获取表格数据
     * @param app_type app类型 1 安卓 2 ios
     * @param page  当前页数 可选
     * @param perPage 分页容量 可选
     */
    async getTableData(app_type = 1, page = this.pageList.page, perPage = this.pageList.perPage) {
      this.app_type = app_type
      this.loading = true
      const detail = await appConfigListData({ app_type, page, perPage })
      if (detail.code === 200) {
        this.tableData = detail.data.list
        this.pageList = Object.assign(this.pageList, detail.data.meta)
        this.loading = false
      }
    },
    handleSizeChange(val) {
      this.pageList.perPage = val
      this.getTableData(this.app_type, this.pageList.page, this.pageList.perPage)
    },
    handleCurrentChange(val) {
      this.pageList.page = val
      this.getTableData(this.app_type, this.pageList.page, this.pageList.perPage)
    },
    /**
     * addAPPClick
     * @desc 新增App版本
     */
    addAPPClick() {
      this.modalData.status = 1
      this.modalData.visibility = true
    },
    /**
     * editModalClick
     * @desc 点击编辑按钮
     * @param detail 当前行的数据
     */
    editModalClick(detail) {
      this.modalData.detail = detail
      this.modalData.status = 2
      this.modalData.visibility = true
    },
    /**
     * delClick
     * @desc 点击删除按钮
     * @param row
     */
    delClick(id) {
      this.$confirm('确认删除？')
        .then(async _ => {
          const detail = await delAppManagement(id)
          if (detail.data) {
            this.$message.success('删除成功!!')
            this.getTableData()
          }
        })
        .catch(_ => {
        })
    }
  }
}
</script>

<style lang="scss" scoped>

.header {
  display         : flex;
  flex-flow       : row nowrap;
  justify-content : space-between;
}

</style>
